<template>
    <el-dialog custom-class="form-dialog permission-dialog" title="用户关联批量设置" :visible.sync="dialogVisible" :destroy-on-close="true"
    :close-on-click-modal="false" width="800px" v-loading="loading">
        <!-- 表单内容 -->
        <div class="form-dialog-content-box">
            <div class="title-box">
                <div>
                    <span class="">当前角色：</span>
                    <el-tag>{{ roleName }}</el-tag>
                </div>
                <div class="submit-tip">
                    <i class="el-icon-warning"></i>
                    <span>提示：请勾选用户进行提交</span>
                </div>
            </div>
             <el-divider></el-divider>
            <el-checkbox-group v-model="relatedUserIds">
                <el-checkbox v-for="item in allUsers" :key="item.id" :label="item.id">{{ item.nickName }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
            <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
//引入混入逻辑
import mixin from '@/mixins/form'
export default {
    name: "permissionDialog",
    mixins: [mixin],
    props: {
        //可选人员列表
        allUsers: {
            type: Array,
            default: function(){
                return []
            }
        }
    },
    data() {
        return {
            size: "",
            loading: false,//页面加载状态
            dialogVisible: false,//对话框展示状态

            id: "",//行id
            roleName: "",//当前角色名称
            relatedUserIds: [],//选中的人员id列表
        }
    },
    methods: {
        //初始化数据(供外部调用)
        initData(row = {}) {
            //记录当前id
            this.id = row.id
            this.roleName = row.roleName
            //清空勾选
            this.relatedUserIds = []
        },
        //初始化选中
        setCheckedData(relatedUserIds = []){
            //保存选中
            this.relatedUserIds = this.$utils.deepCopy(relatedUserIds)
        },
        //处理确认按钮的事件
        handleSubmitBtn() {
            //事件抛出
            this.$emit('submit', {
                roleId: this.id,
                relatedUserIds: this.relatedUserIds
            })
        },
    },
    computed: {
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body{
    padding-top: 15px;
    .form-dialog-content-box{
        .title-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            // margin-bottom: 20px;
            .submit-tip{
                color: #E6A23C;
                .el-icon-warning{
                    margin-right: 0.5em;
                }
            }
        }
        .el-divider--horizontal{
            margin: 16px 0;
        }
    }
}
</style>

